<template>
  <Modal
    v-model="modal"
    :title="title"
    :closable="false"
    :transfer="transfer"
    :mask-closable="false"
    :width="width">
    <template #header>
      <slot name="header"></slot>
    </template>
    <template v-slot:footer>
      <div class="footer">
        <div style="flex: 1" />
        <Button :type="handelBtn.type" @click="onHandel" v-if="handelBtn.handelFlag">
          {{ handelBtn.handelText || '' }}
        </Button>
        <Button @click="onCancel">{{ cancelText || '取消' }}</Button>
        <Button @click="onPreview" v-if="previewFlag">
          {{ previewText || '预览' }}
        </Button>
        <Button
          type="primary"
          @click="onOK"
          :disabled="okDisabled"
          :loading="loading"
          v-preventReClick
          v-if="showOk">
          {{ okText || '确定' }}
        </Button>
        <Button
          type="primary"
          @click="onRight"
          :disabled="okDisabled"
          :loading="loading"
          v-preventReClick
          v-if="showRight">
          {{ rightText || '确定' }}
        </Button>
      </div>
    </template>
    <slot></slot>
    <dt-info :label-width="labelWidth" ref="info" :options="options" @change="onChange"></dt-info>
    <slot name="bottom"></slot>
  </Modal>
</template>

<script>
  export default {
    props: {
      width: Number,
      title: String,
      previewFlag: Boolean,
      previewText: String,
      cancelText: String,
      cancelTip: String,
      alwaysTip: Boolean,
      okText: String,
      loading: Boolean,
      labelWidth: Number,
      handelBtn: {
        type: Object,
        default: () => {
          return {
            type: 'primary',
            handelFlag: false,
            handelText: ''
          }
        }
      },
      okDisabled: {
        type: Boolean,
        default: false
      },
      transfer: {
        type: Boolean,
        default: false
      },
      showRight: Boolean,
      showOk: {
        type: Boolean,
        default: true
      },
      rightText: String
    },
    data() {
      return {
        modal: false,
        info: null,
        options: null,

        isEdit: false
      }
    },
    methods: {
      show(options = [], info = {}) {
        console.log(options, 'show22')
        this.info = info
        console.warn('dt-model-edit : showInfo', info)
        this.$refs.info.init(options, info)
        if (Array.isArray(options)) {
          this.options = options
          this.info = info
        } else {
          this.info = options.info
        }
        this.modal = true
        this.$nextTick(() => {
          this.$refs.info.update()
          setTimeout(() => {
            this.isEdit = false
          }, 100)
        })
      },
      hide() {
        this.$refs.info.clear()
        this.$emit('cancelData') //清理外部数据
        this.modal = false
      },
      update(options = []) {
        this.options = options
      },
      onCancel() {
        console.log('取消了')
        if (this.isEdit || this.alwaysTip) {
          this.$Modal.confirm({
            title: this.cancelTip || '是否放弃编辑内容？',
            onOk: () => {
              this.$emit('cancel', {
                ...this.info
              })
              this.hide()
            }
          })
        } else {
          this.hide()
        }
      },
      onOK() {
        this.$refs.info.validate().then((res) => {
          if (res) {
            this.$emit('ok', {
              ...this.info
            })
          } else {
            console.warn('dt-model-edit', this.info)
          }
        })
      },
      onRight() {
        this.$refs.info.validate().then((res) => {
          if (res) {
            this.$emit('right', {
              ...this.info
            })
          } else {
            console.warn('dt-model-edit', this.info)
          }
        })
      },
      onPreview() {
        this.$refs.info.validate().then((res) => {
          if (res) {
            this.$emit('onPreview', {
              ...this.info
            })
          } else {
            console.warn('dt-model-edit', this.info)
          }
        })
      },
      onHandel() {
        this.$emit('onHandel', { ...this.info })
      },
      onChange(data) {
        this.isEdit = true
        console.log('change')
      }
    },
    directives: {
      preventReClick: {
        inserted(el, binding) {
          el.addEventListener('click', () => {
            if (!el.disabled) {
              el.disabled = true
              setTimeout(() => {
                el.disabled = false
              }, binding.value || 3000)
            }
          })
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .footer {
    display: flex;
  }
</style>
